<template>
	<div class="wrapper">
	  <header>
		<p>用户注册</p>
	  </header>
	  <ul class="form-box">
		<li>
		  <div class="title">手机号码：</div>
		  <div class="content">
			<input
			  type="text"
			  @blur="checkUserId"
			  v-model="user.userId"
			  placeholder="手机号码"
			/>
		  </div>
		</li>
		<li>
		  <div class="title">密码：</div>
		  <div class="content">
			<input type="password" v-model="user.password" placeholder="密码" />
		  </div>
		</li>
		<li>
		  <div class="title">确认密码：</div>
		  <div class="content">
			<input
			  type="password"
			  v-model="confirmPassword"
			  placeholder="确认密码"
			/>
		  </div>
		</li>
		<li>
		  <div class="title">用户名称：</div>
		  <div class="content">
			<input type="text" v-model="user.userName" placeholder="用户名称" />
		  </div>
		</li>
		<li>
		  <div class="title">性别：</div>
		  <div class="content" style="font-size: 3vw">
			<input
			  type="radio"
			  v-model="user.userSex"
			  value='1'
			  style="width: 6vw; height: 3.2vw"
			/>男
			<input
			  type="radio"
			  v-model="user.userSex"
			  value='0'
			  style="width: 6vw; height: 3.2vw"
			/>女
		  </div>
		</li>
	  </ul>
  
	  <div class="button-login">
		<button @click="register">注册</button>
	  </div>
	  <Footer></Footer>
	</div>
  </template>
<script setup>
import Footer from "../components/Footer.vue";
import qs from "qs";
import { useRouter, useRoute } from "vue-router";
import { ref, inject } from "vue";
const axios = inject("axios");
const router = useRouter();
const route = useRoute();
const user = ref({
  userId: "",
  password: "",
  userName: "",
  userSex: 1,
});
const confirmPassword = ref("");

// 检查用户ID是否已存在
const checkUserId = async () => {
  if (!user.value.userId) return;
  
  // 先验证手机号格式
  if(user.value.userId.length != 11 || !/^\d+$/.test(user.value.userId)){
    alert("手机号码格式不正确！请输入11位数字");
    return;
  }

  try {
    const response = await axios.get(
      `UserController/getUserById?userId=${user.value.userId}`
    );
    
    // 如果返回的用户对象不为空
    if (response.data && Object.keys(response.data).length > 0) {
      alert("该手机号已被注册！");
      user.value.userId = ""; // 清空输入框
    }
  } catch (error) {
    console.error("检查用户ID出错:", error);
  }
};

const register = () => {
  // 注册前的验证逻辑保持不变
  if (user.value.userId == "") {
    alert("手机号码不能为空！");
    return;
  }
  if (user.value.password == "") {
    alert("密码不能为空！");
    return;
  }
  if (user.value.password != confirmPassword.value) {
    alert("两次输入的密码不一致！");
    return;
  }
  if (user.value.userName == "") {
    alert("用户名不能为空！");
    return;
  }
  if(user.value.userId.length != 11 || !/^\d+$/.test(user.value.userId)){
    alert("手机号码格式不正确！请输入11位数字");
    return;
  }

  // 注册逻辑保持不变
  axios
    .post("UserController/saveUser", qs.stringify(user.value))
    .then((response) => {
      console.log("注册响应类型:", typeof response);
      console.log("注册响应内容:", response);
      console.log("是否为字符串:", typeof response === 'string');
      
      // 如果响应是字符串，尝试解析为JSON
      let data = response;
      if (typeof response === 'string') {
        try {
          data = JSON.parse(response);
          console.log("解析后的数据:", data);
        } catch (e) {
          console.error("JSON解析失败:", e);
          alert("服务器响应格式错误");
          return;
        }
      }
      
      // 处理响应数据
      if (data && data.code === 1) {
        alert("注册成功！");
        router.go(-1);
      } else if (data && data.code === -1) {
        alert(data.error || "用户ID已存在，请使用其他手机号注册");
      } else {
        alert((data && data.error) || "注册失败！");
      }
    })
    .catch((error) => {
      console.error("注册请求出错:", error);
      alert("网络错误，请稍后重试！");
    });
};
</script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	width: 100%;
	height: 100%;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	color: #fff;
	font-size: 4.8vw;
  
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /****************** 表单部分 ******************/
  .wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
  }
  
  .wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
  }
  
  .wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
  }
  
  .wrapper .form-box li .content {
	flex: 1;
  }
  
  .wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
  }
  
  .wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
  }
  
  .wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38ca73;
	border-radius: 4px;
  
	border: none;
	outline: none;
  }
  
  .wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
  }
  
  .wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #666;
	background-color: #eee;
	border-radius: 4px;
  
	border: none;
	outline: none;
	border: solid 1px #ddd;
  }
  </style>